<template>
	<div class="feed-container">
		<nav-bar title="意见反馈" :custom-back="true" @on-back="handleBack" />
		<div class="section">
			<van-field v-model="keyword" type="textarea" maxlength="200" show-word-limit placeholder="请填写你的宝贵意见和建议"
				:autosize="{ minHeight: 100 }" class="feedback-input" />
		</div>

		<van-button type="primary" block class="submit-btn" @click="submitClick">
			提交
		</van-button>
	</div>
</template>

<script>
	import NavBar from '@/components/NavBar'
	import {
		insertFeedBack
	} from "@/api/feedback.js"
	import {
		Toast
	} from 'vant';
	export default {
		name: 'Feedback',
		components: {
			NavBar
		},
		data() {
			return {
				keyword: '',
				user: []
			}
		},

		created() {
			this.user = JSON.parse(localStorage.getItem('user'))
		},
		methods: {
			handleBack() {
				this.$router.push('/mine')
			},
			submitClick() {
				const that = this;
				if (!this.keyword) {
					Toast.fail("请输入内容");
					return;
				} else {
					try {
						insertFeedBack({
								openSessionId: this.user.openSessionId,
								content: this.keyword,
							})
							.then(res => {
								if (res.code == 200) {
									Toast.success("提交成功");
									setTimeout(function() {
										that.$router.push('/mine')
									}, 1000);
								} else {
									Toast.fail(res.message);
								}
							})
					} catch (err) {
						Toast.fail('提交数据失败')
					} finally {
						this.isLoading = false
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feed-container {
		padding: 10px;
		background-color: #f5f5f5;
		min-height: 60vh;

		.section {
			background-color: white;
			padding: 10px 5px;
			border: 1px solid #ddd;
			border-radius: 4px;
			margin-top: 44px;

			.feedback-input {
				width: 100%;

				::v-deep .van-field__word-limit {
					margin: 10px 0;
					color: #808080;
				}
			}
		}

		.submit-btn {
			width: 94%;
			height: 45px;
			margin: 30px auto;
			border-radius: 6px;
			font-size: 15px;
			// background: #3b6df8 !important;
			border: none;
			color: #fff;
			background-color: #1989fa;
			border: 1px solid #1989fa;
		}
	}
</style>